<template>
	<el-card shadow="hover" class="chapter_item">
		<template slot="header">
			<div class="header">
				<h4 class="handle">章节名称</h4>
				<el-input size="small" v-model="data.title"></el-input>
				<slot></slot>
			</div>
			<div class="describe">
				<h4>章节描述</h4>
				<el-input size="small" v-model="data.title"></el-input>
				<el-input size="small" placeholder="请输入内容" v-model="score">
					<el-button slot="append" @click="handleBatchSetting()">批量设置</el-button>
				</el-input>
			</div>
		</template>
		<div class="subject" ref="subjectRef">
			<div class="item" v-for="(item, index) in testSubjects" :key="index">
				<div class="name" v-html="item.testSubjects?.title" />
				<p>分值</p>
				<el-input size="small" v-model="item.score" />
				<el-button type="text" icon="el-icon-view" @click.stop="handleLookSubject(item)"></el-button>
				<el-button type="text" icon="el-icon-delete" @click.stop="handleDeleteSubject(index)"></el-button>
			</div>
		</div>
	</el-card>
</template>

<script>
import Sortable from 'sortablejs';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			score: 1
		};
	},
	computed: {
		testSubjects() {
			return this.data?.testSubjectVO || [];
		}
	},
	mounted() {
		this.$nextTick(() => {
			let ele = this.$refs['subjectRef'];
			Sortable.create(ele, {
				animation: 150,
				handle: '.name',
				onSort: (evt) => {
					console.log('123123');
				}
			});
		});
	},
	methods: {
		//查看试题详情
		handleLookSubject(item) {
			this.$bus.$emit('lookSubject', item);
		},

		//删除选中试题
		handleDeleteSubject(index) {
			this.testSubjects.splice(index, 1);
		},

		//批量设置分数
		handleBatchSetting() {
			this.testSubjects.forEach((item) => {
				item.score = this.score;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.chapter_item::v-deep {
	margin-top: 16px;
	.el-card__header {
		padding: 0;
	}
	.el-card__body {
		padding: 0;
	}
	.el-input {
		margin: 0 10px;
		&.el-input-group {
			width: 159px;
			margin: 0;
		}
		.el-input-group__append {
			padding: 0 8px;
			flex-shrink: 0;
		}
		.el-button {
			height: 30px;
		}
	}
	.el-button {
		padding: 8px 0;
	}
	h4.handle {
		cursor: move;
	}
	.header,
	.describe {
		display: flex;
		align-items: center;
		padding: 10px;
		h4 {
			flex-shrink: 0;
			font-weight: normal;
		}
	}
	.header {
		background-color: var(--primary-background-plain-disabled);
	}
	.subject {
		padding: 0 10px 10px;
		.item {
			display: flex;
			align-items: center;
			margin-top: 10px;
			padding: 5px 10px;
			border-radius: 4px;
			border: solid 1px #f2f6fc;
			&.sortable-chosen {
				cursor: move;
				border: solid 1px var(--primary-hover);
				background-color: var(--primary-background-plain-disabled);
			}
		}
		.name {
			flex: 1;
			font-size: 16px;
			line-height: 1.5;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			user-select: none;
			color: #606266;
		}
		.el-input {
			width: 60px;
		}
		.el-input__inner {
			text-align: center;
		}
		p {
			flex-shrink: 0;
		}
	}
}
.chapter_item.sortable-chosen .header {
	background-color: var(--primary-border-plain-disabled);
}
</style>
